<template>
  <div class="filter-container vip_zone">
    <div class="filter-content-container fold" ref="filterFold">
      <div>
        <div class="demo-collapse">
          <el-container class="el-container" v-for="item in filterList" :key="item.label">
            <el-aside width="8.33333%" class="filter-label">{{ item.label }}:</el-aside>
            <el-main class="filter-content-col">
              <div
                @click="addTypeList(item.name, select.id)"
                :class="
                  filterInfo.find((item) => item.filterValue.find((itemId) => itemId == select.id))
                    ? 'select-item active'
                    : 'select-item'
                "
                v-for="select in item.choises"
                :key="select.id"
              >
                {{ select.name }}
              </div>
            </el-main>
          </el-container>
        </div>
      </div>
    </div>
    <!-- v-show="filterList.filterCode" -->
    <div class="reset-button" v-show="reset" @click="clearReset">重置</div>
    <p class="fold-toggle-container">
      <span @click="changeHeight" v-show="unfold">展开全部</span>
      <span @click="packUp" v-show="!unfold">收起</span>
    </p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { ElMessage } from 'element-plus';

export default defineComponent({
  name: 'Filter',
});
</script>

<script setup lang="ts">
import { nextTick, ref, watch } from 'vue';
import type { dataType } from '@/api/class';
//重置按钮显示
const reset = ref(false);
//获取列表
interface PropsDataType {
  filterList: dataType[];
}
const props = defineProps<PropsDataType>();
//获取元素
const filterFold = ref();

const unfold = ref(true);
//页面展开
const changeHeight = async () => {
  await nextTick();
  filterFold.value.className = 'filter-content-container';
  unfold.value = false;
};
//页面收起
const packUp = async () => {
  await nextTick();
  filterFold.value.className = 'filter-content-container fold';
  unfold.value = true;
};

//点击添加到选中

const filterInfo = ref<
  {
    filterCode: string;
    filterValue: string[];
  }[]
>([]);
const addTypeList = (name: string, id: string) => {
  const codeNum = filterInfo.value.findIndex((item) => item.filterCode === name);

  if (codeNum !== -1) {
    //能找到name
    if (!!filterInfo.value[codeNum].filterValue.find((item) => item == id)) {
      //能找到id 删除
      filterInfo.value[codeNum].filterValue.splice(
        filterInfo.value[codeNum].filterValue.indexOf(id),
        1
      );
      if (!!filterInfo.value.every((item) => item.filterValue.length === 0)) {
        reset.value = false;
      }
    } else {
      //找不到id 添加
      if (filterInfo.value[codeNum].filterValue.length >= 3) {
        // 长度大于3
        ElMessage({
          message: '每个类型最多选择3项',
        });
        return;
      } else {
        filterInfo.value[codeNum].filterValue.push(id);
        reset.value = true;
      }
    }
  } else {
    //找不到name直接添加
    filterInfo.value.push({
      filterCode: name,
      filterValue: [id],
    });
    reset.value = true;
  }
};
//点击重置

const clearReset = () => {
  filterInfo.value = [
    {
      filterCode: '',
      filterValue: [],
    },
  ];
  reset.value = false;
};
</script>

<style scoped lang="less">
//选项
.filter-container {
  padding: 26px 30px;
  border-radius: 4px;
  background-color: #fff;
  margin-bottom: 10px;
  position: relative;
  .reset-button {
    position: absolute;
    right: 30px;
    top: 33px;
    cursor: pointer;
    font-size: 14px;
    color: #f93684;
  }
  .filter-content-container {
    overflow: hidden;
    .demo-collapse {
      .filter-label {
        color: #b1b5c1;
        padding: 7px 0;
      }
      .filter-content-col {
        padding: 0;
        .select-item {
          display: inline-block;
          cursor: pointer;
          font-size: 14px;
          border-radius: 4px;
          color: #7d8090;
          padding: 7px 13px;
          user-select: none;
          margin-right: 24px;
          margin-bottom: 10px;
        }
        .active {
          background-color: #f93684;
          color: #fff;
        }
      }
    }
  }
  .filter-content-container.fold {
    height: 133px;
  }

  .fold-toggle-container {
    text-align: center;
    color: #f93684;
    font-size: 14px;
    margin: 20px 0 0;
    span {
      cursor: pointer;
    }
  }
}
</style>
